<template>
<view class="container">
    <view class="tocoupons_get" @tap="gotoGet" :style="'color:' + setting.platformSetting.defaultColor">
      <!-- <image src='https://image1.sansancloud.com/xianhua/2019_9/27/14/11/26_691.jpg?x-oss-process=style/preview_120' class='get_coupon_icon'></image> -->
      <text>前往领券中心>></text>
    </view>
    <view class="tab">
      <view v-for="(item, tab_index) in List.tab" :key="tab_index" :style="'border-bottom:' + (showTabIndex == tab_index ? '2px solid '+setting.platformSetting.defaultColor:'')" :data-id="tab_index" @tap="bindTab">{{item.title}}</view>
    </view>
    <view class="Tab_page">
        <block v-for="(list, list_m) in List.listData" :key="list_m">
          <scroll-view :hidden="!(showTabIndex == list_m)" :style="'height: ' + (sysHeight-80) + 'px;'" class="tab_page_list" scroll-y upper-threshold="-30" lower-threshold="10" @scrolltoupper="scrollTopToReflesh" @scrolltolower="scrollBottomToLoadMore">
            <view class="tab_page_list_container" v-if="list&&list.length!=0">
                <!-- 新样式 -->
                <view class="coupon_item" v-for="(cou, index) in list" :key="index" @click.stop="tolinkUrl" :data-link="'coupon_detail.html?couponId=' + cou.couponId">
                  <view class="parting_line">
                    <text class="circle"></text>
                    <text class="circle"></text>
                  </view>
                  <view class="coupon_random_type" :style="'background:' + setting.platformSetting.defaultColor">
                    <text v-if="cou.coupon.belongPromotionId&&cou.coupon.belongPromotionId!=0">{{cou.coupon.belongPromotionName}}</text>
                    <!-- <text wx:elif="{{cou.coupon.belongPromotionId&&cou.coupon.belongPromotionId!=0}}">{{cou.coupon.belongPromotionName}}</text> -->
                    <text v-else>普通券</text>
                  </view>
                  <view class="coupon_item_top">
                    <view class="coupon_item_top_left">
                      <view class="coupon_money" :style="'color:' + setting.platformSetting.defaultColor">
                        <text style="letter-spacing:-8rpx;font-size:24rpx">￥</text>{{cou.couponYouhuiAmount}}
                      </view>
                      <view class="coupon_type" :style="'color:' + setting.platformSetting.defaultColor">
                        <text v-if="cou.coupon.orderAmount!=0">满{{cou.coupon.orderAmount}}元可用</text>
                        <text v-else>无金额门槛</text>
                      </view>
                    </view>
                    <view class="coupon_item_top_center">
                      <text class="coupon_item_name">{{cou.couponName}}</text>
                      <text class="coupon_item_time">有效期至 {{cou.couponEndDate}}</text>
                    </view>
                    <view class="coupon_item_top_right">
                      <view class="cou_btn" :style="'background:' + setting.platformSetting.defaultColor" @click.stop="toIndex">立即使用</view>
                    </view>
                  </view>
                  <view class="coupon_item_bottom">
                    <view class="coupon_item_bottom_remark">
                      <text v-if="cou.coupon.belongShopId&&cou.coupon.belongShopId!=0">【仅限于{{cou.coupon.belongShopName}}内使用】</text>
                      {{cou.coupon.remark}}
                    </view>
                  </view>
                </view>
                <!-- 新样式 -->
            </view>
            <view class="noList" v-else>
              <text v-if="showTabIndex==0">主人~现在暂时还没有可使用的优惠券哦~!</text>
              <text v-if="showTabIndex==1">主人~现在暂时还没有已使用的优惠券哦~!</text>
              <text v-if="showTabIndex==2">主人~现在暂时还没有已过期的优惠券哦~!</text>
            </view>
          </scroll-view>
        </block>
    </view>
</view>
</template>

<script>

export default {
  data() {
    return {
      List: {
        tab: [],
        listData: []
      },
      showTabIndex: 0,
      sysWidth: 320,
      //图片大小
      sysHeight: 500,
      optParam: {},
      setting: "",
      loginUser: ""
    };
  },

  components: {},
  props: {},
  // option数据 用来转发和刷新
  onLoad: function (options) {
    this.optParam = options; // this.getData(0)

    this.loadList();
  },
  onReady: function () {
    this.setData({
      setting: getApp().globalData.setting,
      loginUser: getApp().globalData.loginUser,
      sysWidth: getApp().globalData.sysWidth,
      sysHeight: getApp().globalData.sysHeight
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.List = {
      tab: [],
      listData: []
    };
    this.onLoad();
    wx.stopPullDownRefresh();
  },
  methods: {
    gotoGet: function () {
      wx.navigateTo({
        url: '../available_coupons/index'
      });
    },

    /* 回首页 */
    toIndex: function () {
      getApp().globalData.toIndex();
    },

    /**
     * 生命周期函数--监听页面加载
     */

    /* 去掉日期的时间 */
    spliceData: function (e) {
      for (let i = 0; i < e.length; i++) {
        e[i].couponStartDate = e[i].couponStartDate.substring(0, 10);
        e[i].couponEndDate = e[i].couponEndDate.substring(0, 10);
      }

      return e;
    },
    // 点击Tab切换
    bindTab: function (e) {
      console.log("===bindTab==",e)
      var index = e.currentTarget.dataset.id;
      this.setData({
        showTabIndex: index
      });
    },
    loadTab: function () {
      //加载tab项
      let tab = [{
        title: '未使用',
        linkUrl: '',
        page: 1,
        pageSize: 0,
        curPage: 0,
        totalSize: 0
      }, {
        title: '已使用',
        linkUrl: '',
        page: 1,
        pageSize: 0,
        curPage: 0,
        totalSize: 0
      }, {
        title: '已过期',
        linkUrl: '',
        page: 1,
        pageSize: 0,
        curPage: 0,
        totalSize: 0
      }];
      let List = this.List;
      List.tab = tab;

      for (let i = 0; i < tab.length; i++) {
        List.listData.push([]);
      }

      this.setData({
        List: List
      });
      let listData = this.loadListData(); //加载tab项对应列表数据
    },
    loadListData: function () {
      //加载tab项对应列表数据
      this.getData(0);
      this.getData(1);
      this.getData(2);
      let listData = [];
      return listData;
    },
    // 加载全部数据并且暴露渲染
    loadList: function (e) {
      let tab = this.loadTab(); //加载tab项
    },
    getData: function (tabi) {
      let that = this;
      let getParam = {};
      getParam.couponState = tabi;
      getParam.page = that.List.tab[tabi].page;
      let customIndex = getApp().globalData.AddClientUrl("/get_my_coupons_list.html", getParam, 'get');
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log(res.data);
          wx.hideLoading();
          let List = that.List; //tab数据变化

          List.tab[tabi].pageSize = res.data.pageSize;
          List.tab[tabi].curPage = res.data.curPage;
          List.tab[tabi].totalSize = res.data.totalSize;
          let result = that.spliceData(res.data.result);
          List.listData[tabi] = List.listData[tabi].concat(result);
          that.setData({
            List: List
          });
        },
        fail: function (res) {
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },

    /* 组件事件集合 */
    tolinkUrl: function (e) {
      let linkUrl = e.currentTarget.dataset.link;
      getApp().globalData.linkEvent(linkUrl);
    },
    scrollTopToReflesh: function () {},
    scrollBottomToLoadMore: function () {
      console.log(this.List);
      let List = this.List;
      let tabIndex = this.showTabIndex;
      console.log(List.tab[tabIndex].page);

      if (List.tab[tabIndex].totalSize > List.tab[tabIndex].curPage * List.tab[tabIndex].pageSize) {
        ++List.tab[tabIndex].page;
        this.getData(tabIndex);
      }
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>